<template>
 <div class="black-nav">
    <div class="wrap">
      <ul class="black-nav-left">
        <li><a href="#">小米官网</a><span>|</span></li>
        <li><a href="#">小米商城</a><span>|</span></li>
        <li><a href="#">小米澎湃OS</a><span>|</span></li>
        <li><a href="#">小米汽车</a><span>|</span></li>
        <li><a href="#">云服务</a><span>|</span></li>
        <li><a href="#">loT</a><span>|</span></li>
        <li><a href="#">有品</a><span>|</span></li>
        <li><a href="#">小爱开发平台</a><span>|</span></li>
        <li><a href="#">资质证照</a><span>|</span></li>
        <li><a href="#">协议规则</a><span>|</span></li>
        <li>
          <a href="#">下载APP</a>
          <span>|</span>
          <div class="download">
            <img src="../../../public/images/download.png" alt="">
            <p>小米商城App</p>
          </div>
          <div class="stri"></div>
        </li>
        <li><a href="#">SelectLocation</a><span>|</span></li>
      </ul>
      <ul class="black-nav-right">
        <li v-if="username" class="user-info">
      <div class="user-dropdown">
        <div class="avatar-wrapper">
          <img 
            class="head_img" 
            :src="head ? `http://127.0.0.1:3000/head/${head}` : defaultAvatar" 
            alt="用户头像"
            @error="handleImageError"
          >
        </div>
        <span class="username">{{ username }}</span>
        <div class="dropdown-menu">
          <a href="#/portal">个人中心</a>
          <a href="#/order">我的订单</a>
          <a href="#/zhanghao">账户设置</a>
          <a href="#" @click.prevent="logout">退出登录</a>
        </div>
      </div>
    </li>
        <li v-else>
          <a href="#/login" class="login">请先登录</a>
        </li>
        <li><a href="#/reg">注册</a><span>|</span></li>
        <li><a href="#">消息通知</a><span>|</span></li>
        <li class="cart">
          <a href="#/cart">
            <i class="iconfont">&#xe607;</i>
            <i>购物车</i>
          </a>
        </li>
        <li class="cart">
          <a href="#">
            <i class="iconfont">&#xe65d;</i>
            <i><a href="#/portal">个人中心</a></i>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const username = ref('');
const head = ref('');

// 在组件挂载时检查是否已登录
onMounted(() => {
  if(sessionStorage.getItem('user')) {
    const user = JSON.parse(sessionStorage.getItem('user'));
    username.value = user.truename || '';
    //console.log(user);
    head.value = user.head || '';
  }
});



// 退出登录
const logout = () => {
  sessionStorage.removeItem('user');
  window.location.reload();
  router.push('/login');
};
</script>

<style scoped>
/* 用户信息区域样式 */
.user-info {
  position: relative;
  padding: 0 10px;
}

.user-dropdown {
  display: flex;
  align-items: center;
  height: 40px;
  cursor: pointer;
  position: relative;
}

.user-dropdown:hover .dropdown-menu {
  display: block;
}

/* 头像容器样式 */
.avatar-wrapper {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 8px;
  border: 2px solid #ff6700;
  transition: all 0.3s ease;
}

.avatar-wrapper:hover {
  transform: scale(1.1);
}

/* 头像图片样式 */
.head_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #f5f5f5;
}

/* 用户名样式 */
.username {
  font-size: 14px;
  color: white;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 下拉菜单样式 */
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  width: 160px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  z-index: 100;
  padding: 8px 0;
}

.dropdown-menu a {
  display: block;
  padding: 8px 16px;
  color: #333;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.2s;
}

.dropdown-menu a:hover {
  background-color: #f5f5f5;
  color: #ff6700;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .username {
    display: none;
  }
  
  .avatar-wrapper {
    margin-right: 0;
  }
}
</style>
